<template>
  <div class="page">

    <div ref="tableHeaderContainer" class="base-search-group-container">
      <form class="base-search" onsubmit="return false;">
        <div class="customer-list-base-search-group">
          <el-input v-model="model.keyWord" :placeholder="fuzzyPlaceHolder" v-trim:blur>
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
            <el-button slot="append" type='primary' @click="model.pageNum=1;search();" native-type="submit" v-track="$track.formatParams('KEYWORD_SEARCH')">{{ $t('common.base.search') }}</el-button>
          </el-input>
          <el-button type="plain-third" @click="reset()" class="ml_12" v-track="$track.formatParams('RESET_SEARCH')">
            {{ $t('common.base.reset') }}
          </el-button>
        </div>
        <span class="advanced-search-visible-btn" @click.stop="isExpand = !isExpand;trackEventHandler('advSearch')">
          <i class="iconfont icon-filter"></i>
          {{ $t('common.base.advancedSearch') }}
        </span>
      </form>
    </div>

    <base-search-drawer
      :show='isExpand'
      @close='closeDrawer'
      @reset='reset'
      @search='search'
      :show-setting='false'
    >
      <el-form label-position="top" :model='model'>
        <template v-if="listType != 'personProcess'">
          <el-form-item :label="$t('common.fields.partName.displayName')">
            <el-select popper-class="common-advance-popper" style="width:100%;"
                          :value="partData.id"
                          @input="chooseSparepart"
                          filterable
                          clearable
                          remote
                          :placeholder="$t('common.placeholder.input2')"
                          :remote-method="fetchSparepart"
                          :loading="partData.loading">

              <el-option
                v-for="item in partData.options"
                :key="item.id"
                :label="item.name"
                :value="item.id">
                <div class="part-option">
                  <p>{{$t('common.label.serialNumber')}}：{{item.serialNumber}}</p>
                  <p>{{$t('common.base.name')}}：{{item.name}}</p>
                </div>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('part.partType')">
            <el-select :placeholder="$t('part.list.text7')" v-model="model.typeList" multiple>
              <el-option :label="item" :value="item" v-for="item in types" :key="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('common.part.specifications')">
            <el-input v-model="model.standard" maxlength="1000" :placeholder="$t('common.placeholder.input2')"></el-input>
          </el-form-item>
          <el-form-item :label="$t('common.part.explain')">
            <el-input v-model="model.description" maxlength="1000" :placeholder="$t('common.placeholder.input2')"></el-input>
          </el-form-item>
          <template v-if="personDataLevel > 1">
            <el-form-item :label="$t('product.type.tags')">
              <biz-team-select :value="tag" @input="chooseTeam"/>
            </el-form-item>
          </template>
          <!--关联产品类型：超级二维码开启并且持有备件和使用记录有-->
          <el-form-item :label="$t('common.form.type.related_catalog')" v-show="openSuperCodePro && listType != 'stockRecord'">
            <el-select :placeholder="$t('part.list.text11')" v-model="model.productTypeList" multiple filterable>
              <el-option :label="item.catalogName" :value="item.id" v-for="item in productType" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
          <!--类型只有在库存记录和使用记录有-->
          <el-form-item :label="$t('common.label.type')" v-show="listType != 'part'">
            <el-select :placeholder="$t('common.validate.selectType')" v-model="model.item" multiple>
              <el-option :label="type" :value="type" v-for="(type, index) in typeItem" :key="`${type}_${index}_type`"></el-option>
            </el-select>
          </el-form-item>
          <!--库存记录新增：原仓库，备注，出入库编号-->
          <template v-if="listType == 'stockRecord'">
            <el-form-item :label="$t('part.field26')">
              <el-select :placeholder="$t('common.base.pleaseSelect')" v-model="model.sourceIdList" multiple>
                <el-option :label="item.name" :value="item.id" v-for="(item, index) in sourceNameList" :key="`${item}_${index}_source`"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('common.base.remark')">
              <el-input v-model="model.remark" maxlength="1000" :placeholder="$t('common.placeholder.input2')"></el-input>
            </el-form-item>
            <el-form-item :label="$t('part.field30')">
              <el-input v-model="model.recordNo " maxlength="1000" :placeholder="$t('common.placeholder.input2')"></el-input>
            </el-form-item>
          </template>
        </template>
        <template v-else>
          <el-form-item :label="$t('common.label.type')">
            <el-select :placeholder="$t('common.base.pleaseSelect')" v-model="modelOther.typeSpec">
              <el-option :label="$t('common.base.all')" value=""></el-option>
              <el-option :label="$t('common.event.actionStatus.allot')" value="分配"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('common.base.isEnabled')">
            <el-select :placeholder="$t('common.base.isEnabled')" v-model="modelOther.enable">
              <el-option :label="$t('common.base.all')" value=""></el-option>
              <el-option :label="$t('common.base.enable')" value="1"></el-option>
              <el-option :label="$t('common.base.disable')" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('common.label.sparepartType')">
            <el-select popper-class="common-advance-popper" style="width: 100%;"
                          :value="modelOther.sparepartType"
                          @input="hooseSparepartType"
                          filterable
                          clearable
                          remote
                          :placeholder="$t('part.list.text7')">
              <el-option
                v-for="item in types"
                :key="item"
                :label="item"
                :value="item">
                <div class="part-option">
                  <p>{{item}}</p>
                </div>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('common.fields.partName.displayName')">
            <el-select popper-class="common-advance-popper" style="width: 100%;"
                          :value="modelOther.sparepartId"
                          @input="chooseSparepart"
                          filterable
                          clearable
                          remote
                          :placeholder="$t('common.base.pleaseSelect')"
                          :remote-method="fetchSparepart"
                          :loading="sparepart.loading">

              <el-option
                v-for="item in sparepart.options"
                :key="item.id"
                :label="item.name"
                :value="item.id">
                <div class="part-option">
                  <p>{{$t('common.label.serialNumber')}}：{{item.serialNumber}}</p>
                  <p>{{$t('common.base.name')}}：{{item.name}}</p>
                </div>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('common.label.sponsor')">
            <publink-select class="srp-list-form-item" style="width: 100%;"
                          :value="modelOther.propser"
                          @input="chooseUserApply"
                          filterable
                          clearable
                          remote
                          :placeholder="$t('common.base.pleaseSelect')"
                          is-search-user
                          :remote-method="fetchUserApply"
                          :loading="userApply.loading">

              <el-option
                v-for="item in userApply.options"
                :key="item.userId"
                :label="item.displayName"
                :value="item.userId">

                <div class="srp-user-item">
                  <img :src="item.head || '/resource/images/account_userhead.png'">
                  <p>{{item.displayName}}</p>
                </div>
              </el-option>
            </publink-select>
          </el-form-item>
          <el-form-item :label="$t('common.label.status')">
            <el-select :value="state" @input="chooseState" class="srp-list-form-item">
              <el-option value="" :label="$t('common.base.all')"></el-option>
              <el-option value="suspending" :label="$t('common.form.preview.stock.status.suspending')"></el-option>
              <el-option value="solved" :label="$t('common.form.preview.stock.status.solved')"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('part.field31')">
            <el-date-picker @change="seeTime" style="width:100%"
                               v-model="timeValue"
                               type="daterange"
                               align="right"
                               value-format="timestamp"
                               :default-time="['00:00:00', '23:59:59']"
                               unlink-panels
                               range-separator="-"
                               :start-placeholder="$t('common.base.startDate')"
                               :end-placeholder="$t('common.base.endDate')"
                               :picker-options="pickerOptions2">
            </el-date-picker>
          </el-form-item>
          <el-form-item :label="t('part.field32')">
            <el-date-picker @change="seeUpdateTime" style="width:100%"
                               v-model="updateTimeValue"
                               type="daterange"
                               align="right"
                               value-format="timestamp"
                               :default-time="['00:00:00', '23:59:59']"
                               unlink-panels
                               range-separator="-"
                               :start-placeholder="$t('common.base.startDate')"
                               :end-placeholder="$t('common.base.endDate')"
                               :picker-options="pickerOptions2">
            </el-date-picker>
          </el-form-item>
        </template>
      </el-form>
    </base-search-drawer>

    <div ref="tableDoContainer" class="page-panel" style="margin: 0">
      <div class="page-panel-body srp-list-form">
        <div>
          {{$t('common.form.type.user')}}：
          <publink-select class="srp-list-form-item" style="width: 180px;"
                        v-if="personDataLevel > 1"
                        :value="user.userId"   
                        @input="chooseUser"
                        filterable
                        clearable
                        remote
                        :placeholder="$t('common.placeholder.input2')"
                        :remote-method="fetchUser"
                        :loading="user.loading">

            <el-option
              v-for="item in user.options"
              :key="item.userId"
              :label="item.displayName"
              :value="item.userId"
              :origin="item"
            >

              <div class="srp-user-item">
                <img :src="item.head || '/resource/images/account_userhead.png'">
                <p>
                  <template v-if="isOpenData">
                    <open-data type="userName" :openid="item.staffId"></open-data>
                  </template>
                  <template v-else>
                    {{ item.displayName }}
                  </template>
                </p>
              </div>
            </el-option>
          </publink-select>

          <el-select placeholder="$t('part.text45')" :value="listType" @input="chooseType" class="srp-list-form-item" style="width: 120px;">
            <el-option :label="$t('part.text46')" value="part"></el-option>
            <el-option :label="$t('part.text47')" value="stockRecord"></el-option>
            <el-option :label="$t('part.text48')" value="useRecord"></el-option>
            <el-option :label="$t('part.text49')" value="personProcess"></el-option>
          </el-select>
          <el-date-picker class="srp-list-form-item srp-list-form-item-date-picker" style="width:350px;"
                             v-if="listType != 'part' && listType != 'personProcess'"
                             :value="dateRange"
                             @input="chooseDate"
                             type="daterange"
                             value-format="timestamp"
                             :default-time="['00:00:00', '23:59:59']"
                             align="right"
                             unlink-panels
                             range-separator="-"
                             :start-placeholder="$t('common.base.startDate')"
                              :end-placeholder="$t('common.base.endDate')">
          </el-date-picker>
          <span v-if="listType === 'part' && this.user.userId" style="margin-left: 10px">{{$t('part.text50')}}：{{sparepartStatistics.sparepartNumTotal}}</span>
          <span v-if="listType === 'part'" style="margin-left: 10px">{{$t('part.text51')}}：{{Number(sparepartStatistics.sparepartCountTotal)}} </span>
        </div>

        <div>
          <el-dropdown :hide-on-click="false" trigger="click" :show-timeout="150" v-if=" isButtonDisplayed && allowImportAndExport && listType != 'personProcess'" @command="trackEventHandler('moreAction')">
            <span class="el-dropdown-link cur-point mr_12">
              {{ $t('common.base.moreOperator') }}
              <i class="iconfont icon-more"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              
              <el-dropdown-item v-if="isButtonDisplayed">
                <span class="dropdown-item" @click="exportData(false)" v-track="$track.formatParams('EXPORT', null, 'MORE_ACTIONS')">{{ $t('common.base.export') }}</span>
              </el-dropdown-item>
             
              <el-dropdown-item v-if="isButtonDisplayed"> 
                <span class="dropdown-item" @click="exportData(true)" v-track="$track.formatParams('EXPORT_ALL', null, 'MORE_ACTIONS')">{{ $t('common.base.exportAll') }}</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          
          <el-dropdown :hide-on-click="false" trigger="click" :show-timeout="150" v-track="$track.formatParams('SELECT_COLUMN')">
            <span class="el-dropdown-link cur-point ml_12">{{$t('common.base.choiceCol')}}&nbsp;&nbsp;<i class="iconfont icon-more"></i></span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="column in columns" :key="column.field">
                <el-checkbox class="dropdown-item" :value="column.show" @input="chooseColnum(column, listType)">{{column.label}}</el-checkbox>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>

    <!-- <div ref="BaseSelectionBarComponent" class="base-selection-wrapper">
      <base-selection-bar ref="baseSelectionBar" v-model="selected" @toggle-selection="toggleSelection" @show-panel="() => multipleSelectionPanelShow = true" />
    </div> -->

    <div class="table-container">
      <el-table :data="page.list" ref="table"
               v-loading="pageLoading"
                border
                stripe
                :height="tableContainerHeight"
                class="bbx-normal-list-box"
                @sort-change="sort"
                key="pageListTable"
                header-row-class-name="base-table-header-v3"
                @select="handleSelection"
                @header-dragend="headerDragend"
                @select-all="handleSelection" >
                  <template slot="empty">
                    <BaseListForNoData v-show="!pageLoading" ></BaseListForNoData>
                  </template>
        <el-table-column
          type="selection"
          fixed
          align='center'
          width="44">
        </el-table-column>

        <template v-if="listType == 'part'">
          <template v-for="column in showColumns">
            <el-table-column
              v-if="column.field == 'operate'"
              :key="column.field"
              :label="column.label"
              :width="column.width"
              :fixed="column.fixed">

              <template slot-scope="scope" v-if="scope.row.back">
                <el-button type="text" class="no-padding" @click="partBack(scope.row)">{{ $t('common.paas.buttons.back') }}</el-button>
              </template>
            </el-table-column>
            <el-table-column
              v-else-if="column.field == 'repertoryCount'"
              :key="column.field"
              :label="column.label"
              :width="column.width"
            >
              <template slot-scope="scope" >{{Number(repertoryCount(scope.row.repertoryCount, scope.row.applyBacking))}} </template>
            </el-table-column>

            <!-- 不可用数量 -->
            <el-table-column
              v-else-if="column.field == 'unavailableNum'"
              :key="column.field"
              :label="column.label"
              :width="column.width"
            >
              <template slot-scope="scope">
                <el-popover
                  placement="top-start"
                  width="250"
                  trigger="hover"
                  @after-leave="isTooltipShow = false">
                  <div class="unavailable-content">
                    <p>{{$t('part.text52', {num:scope.row.occupyNum})}} <span class="unavailable-content-btn" v-if="scope.row.occupyNum" @click="getApplyBackingTask(scope.row)">{{ $t('common.base.view') }}</span></p>
                    <p>{{$t('part.text53', {num:scope.row.applyBacking})}}</p>
                    <div class="unavailable-content-box" v-if="isTooltipShow">
                      <p class="title">
                        <span>{{ $t('part.text54') }}</span>
                        <i class="el-dialog__close el-icon el-icon-close" @click="isTooltipShow = false"></i>
                      </p>
                      <a
                        class="task-link"
                        v-for="item in applyBackingTask"
                        :key="item.taskNo"
                        :href="`${$resourcePrefix}/task/view/${item.id}`"
                        :data-id="item.id"
                        @click.prevent="openTaskDetail(item)">
                        {{item.taskNo}}
                      </a>
                      <!-- <a class="task-link" href="http://www.baidu.com" target="_blank">TUY5119090052</a>
                      <a class="task-link" href="http://www.baidu.com" target="_blank">TUY5119090052</a> -->
                    </div>
                  </div>
                  <span slot="reference">{{scope.row.unavailableNum}}</span>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column v-else-if="column.field == 'userName'"
                                :key="column.field"
                                :label="column.label"
                                :width="column.width"
                                :min-width="column.minWidth"
                                :prop="column.field"
                                :show-overflow-tooltip="getSparePartPersonalUserNameShowTooltip(column)"
            >
              <template slot-scope="scope">
                <template v-if="isOpenData">
                  <open-data type="userName" :openid="scope.row.staffId"></open-data>
                </template>
                <template v-else>
                  {{ scope.row.userName }}
                </template>
              </template> 
            </el-table-column>
            <!--关联产品类型-->
            <el-table-column
              v-else-if="column.field == 'productTypeList'" 
              :key="column.field"
              :label="column.label"
              :width="column.width"
              show-overflow-tooltip>
              <template slot-scope="scope">
                <div v-if="scope.row.productTypeList && scope.row.productTypeList.length!=0">
                  <label
                    style="color: #55B7B4;cursor: pointer"
                    v-for="(item, index) in scope.row.productTypeList"
                    :key="`${index}_${scope.row.id}`"
                    @click="openProductMenuTab(item.id)">
                    {{ item.catalogName }}<span v-if="index!=scope.row.productTypeList.length-1">,</span>
                  </label>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              v-else
              :key="column.field"
              :label="column.label"
              :width="column.width"
              :prop="column.field"
              :sortable="column.sortable"
              :fixed="column.fixed"
              show-overflow-tooltip>
            </el-table-column>
          </template>
        </template>

        <template v-else-if="listType == 'stockRecord'">
          <template v-for="column in showColumns">
            <el-table-column v-if="column.field == 'remark'"
                                :key="column.field"
                                :label="column.label"
                                :width="column.width"
                                :min-width="column.minWidth"
                                :prop="column.field">

              <template slot-scope="scope">
                <el-tooltip class="item" placement="top" popper-class="common-tooltip">
                  <div slot="content" class="pre">{{scope.row[column.field]}}</div>
                  <div class="text-overflow-hidden">{{scope.row[column.field]}}</div>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column v-else-if="column.field == 'userName'"
                                :key="column.field"
                                :label="column.label"
                                :width="column.width"
                                :min-width="column.minWidth"
                                :prop="column.field"
                                :show-overflow-tooltip="getSparePartPersonalUserNameShowTooltip(column)">
              <template slot-scope="scope">
                <template v-if="isOpenData">
                  <open-data type="userName" :openid="scope.row.staffId"></open-data>
                </template>
                <template v-else>
                  {{ scope.row.userName }}
                </template>
              </template> 
            </el-table-column>
            <el-table-column v-else-if="column.field == 'propserName'"
                                :key="column.field"
                                :label="column.label"
                                :width="column.width"
                                :min-width="column.minWidth"
                                :prop="column.field"
                                :show-overflow-tooltip="getSparePartPersonalUserNameShowTooltip(column)">
              <template slot-scope="scope">
                <template v-if="isOpenData">
                  <open-data type="userName" :openid="scope.row.propserStaffId"></open-data>
                </template>
                <template v-else>
                  {{ scope.row.propserName }}
                </template>
              </template> 
            </el-table-column>
            <el-table-column v-else-if="column.field == 'executorName'"
                                :key="column.field"
                                :label="column.label"
                                :width="column.width"
                                :min-width="column.minWidth"
                                :prop="column.field"
                                :show-overflow-tooltip="getSparePartPersonalUserNameShowTooltip(column)">
              <template slot-scope="scope">
                <template v-if="isOpenData">
                  <open-data type="userName" :openid="scope.row.executorStaffId"></open-data>
                </template>
                <template v-else>
                  {{ scope.row.executorName }}
                </template>
              </template> 
            </el-table-column>
            <el-table-column v-else-if="column.field == 'createTime'"
                                :key="column.field"
                                :label="column.label"
                                :width="column.width"
                                :min-width="column.minWidth"
                                :prop="column.field"
                                :show-overflow-tooltip="getSparePartPersonalUserNameShowTooltip(column)">
              <template slot-scope="scope">
                <template>
                  {{ scope.row[column.field] | fmt_datetime }}
                </template>
              </template> 
            </el-table-column>
            <el-table-column
              v-else
              :key="column.field"
              :label="column.label"
              :width="column.width"
              :min-width="column.minWidth"
              :prop="column.field"
              show-overflow-tooltip>
            </el-table-column>
          </template>
        </template>

        <template v-else-if="listType == 'useRecord'">
          <template v-for="column in showColumns">
            <el-table-column
              v-if="column.field === 'taskNo'"
              :key="column.field"
              :label="column.label"
              :width="column.width"
              :min-width="column.minWidth"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <a
                  v-if="scope.row.canViewTask"
                  class="no-padding el-button no-padding el-button--text"
                  style="color: #55B7B4;text-decoration: none;"
                  @click.prevent="openTaskDetail2(scope.row)">
                  {{scope.row.taskNo}}
                </a>
                <span v-else>{{scope.row.taskNo}}</span>
              </template>
            </el-table-column>
            <el-table-column
              v-else-if="column.field === 'customerNumber'"
              :key="column.field"
              :label="column.label"
              :width="column.width"
              :min-width="column.minWidth"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <a
                  v-if="scope.row.canViewCustomer"
                  class="no-padding el-button no-padding el-button--text"
                  style="color: #55B7B4;text-decoration: none;"
                  @click.prevent="openCustomerDetail(scope.row.customer)">
                  {{scope.row.customerNumber}}
                </a>
                <span v-else>{{scope.row.customerNumber}}</span>
              </template>
            </el-table-column>
            <el-table-column
              v-else-if="column.field === 'attribute.installProductId'"
              :key="column.field"
              :label="column.label"
              :width="column.width"
              :min-width="column.minWidth"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                {{ scope.row.attribute ? scope.row.attribute.installProductName : '' }}
              </template>
            </el-table-column>
            <el-table-column
              v-else-if="column.field === 'attribute.installProductId'"
              :key="column.field"
              :label="column.label"
              :width="column.width"
              :min-width="column.minWidth"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                {{ scope.row.attribute ? scope.row.attribute.installProductName : '' }}
              </template>
            </el-table-column>
            <el-table-column v-else-if="column.field == 'userName'"
                                :key="column.field"
                                :label="column.label"
                                :width="column.width"
                                :min-width="column.minWidth"
                                :prop="column.field"
                                :show-overflow-tooltip="getSparePartPersonalUserNameShowTooltip(column)">
              <template slot-scope="scope">
                <template v-if="isOpenData">
                  <open-data type="userName" :openid="scope.row.staffId"></open-data>
                </template>
                <template v-else>
                  {{ scope.row.userName }}
                </template>
              </template> 
            </el-table-column>
            <!--关联产品类型-->
            <el-table-column 
              v-else-if="column.field == 'productTypeList'"
              :key="column.field"
              :label="column.label"
              :width="column.width"
              show-overflow-tooltip>
              <template slot-scope="scope">
                <div v-if="scope.row.productTypeList && scope.row.productTypeList.length!=0">
                  <label
                    style="color: #55B7B4;cursor: pointer"
                    v-for="(item, index) in scope.row.productTypeList"
                    :key="`${index}_${scope.row.id}`"
                    @click="openProductMenuTab(item.id)">
                    {{ item.catalogName }}<span v-if="index!=scope.row.productTypeList.length-1">,</span>
                  </label>
                </div>
              </template>
            </el-table-column>
            <el-table-column 
              v-else-if="column.field == 'createTime'"
              :key="column.field"
              :label="column.label"
              :width="column.width"
              show-overflow-tooltip>
              <template slot-scope="scope">
               {{ scope.row[column.field] | fmt_datetime }}
              </template>
            </el-table-column>
            <el-table-column
              v-else
              :key="column.field"
              :label="column.label"
              :width="column.width"
              :min-width="column.minWidth"
              :prop="column.field"
              show-overflow-tooltip>
            </el-table-column>
          </template>
        </template>

        <template v-else-if="listType == 'personProcess'">
          <template v-for="(column, index) in showColumns">

            <el-table-column v-if="column.field == 'variation'" :key="index + '123'" slot-scope="scope">
              {{scope.row.variation - scope.row.solvedVariation}}
            </el-table-column>
            <el-table-column
              v-if="column.field == 'operate'"
              :key="index + '123'"
              :fixed="column.fixed || ''"
              :label="column.label"
              :width="column.width">

              <template slot-scope="scope">
                <!-- 分配 -->
                <template v-if="scope.row.state == 'suspending' && scope.row.type =='分配'">
                  <el-tooltip class="item" effect="dark" :content="$t('part.text55')" placement="bottom">
                    <el-button type="text" size="medium" class="no-padding" style="color:#333;cursor: text;" key="00">{{ $t('part.text34') }}</el-button>
                  </el-tooltip>
                  <!-- 当前用户与目标库用户 一直 并且 待办理数大于0 -->
                  <el-button key="11" v-if="userId == scope.row.targetId && scope.row._variation > 0" type="text" class="no-padding" @click="receiveAndRejectDialog(scope.row, '0')">{{ $t('part.text25') }}</el-button>
                  <el-button key="22" v-if="userId == scope.row.targetId && scope.row._variation > 0" type="text" class="no-padding" @click="receiveAndRejectDialog(scope.row, '1')" style="margin-left: 15px">{{ $t('part.text26') }}</el-button>
                </template>
                <template v-if="scope.row.state == 'solved' && scope.row.type =='分配'">
                  <el-button type="text" size="medium" class="no-padding" style="color:#333;cursor: text;" key="33"> {{ $t('common.form.preview.stock.status.warehoused') }}</el-button>
                </template>
                <template v-if="scope.row.state == 'revoked' && scope.row.type =='分配'">
                  <el-button type="text" size="medium" class="no-padding" style="color:#333;cursor: text;" key="44">{{$t('common.form.preview.stock.status.revoked')}}</el-button>
                </template>
                <template v-if="scope.row.state == 'rejected' && scope.row.type =='分配'">
                  <el-button type="text" size="medium" class="no-padding" style="color:#333;cursor: text;" key="55">{{$t('part.text35')}}</el-button>
                </template>
              </template>
            </el-table-column>

            <el-table-column
              v-else
              :key="index"
              :label="column.label"
              :width="column.width"
              :min-width="column.minWidth"
              :prop="column.field"
              :sortable="column.sortable"
              show-overflow-tooltip>
            </el-table-column>
          </template>
        </template>

      </el-table>

    </div>

    <div ref="tableFooterContainer" class="table-footer bbx-normal-table-footer">
      <div class="list-info">
        <i18n path="common.base.table.totalCount">
          <span place="count" class="level-padding">{{page.total || 0}}</span>
        </i18n>
        <i18n path="common.base.table.selectedNth">
          <span
            place="count"
            class="base-table-selected-count"
            @click="multipleSelectionPanelShow = true"
          >{{selected.length}}</span>
        </i18n>
        <template v-if="selected&&selected.length>0">
          <span class="base-table-selected-count" @click="toggleSelection()">{{ $t('common.base.clear') }}</span>
        </template>
      </div>
      <el-pagination
        class="customer-table-pagination"
        background
        @current-change="jump"
        @size-change="pageSizeChange"
        :page-sizes="defaultTableData.defaultPageSizes"
        :page-size="model.pageSize"
        :current-page="model.pageNum"
        layout="prev, pager, next, sizes, jumper"
        :total="page.total">
      </el-pagination>
    </div>

    <el-dialog :title="$t('part.text59')" :visible.sync="isReceiveAndRejectDialog" width="600px">
      <part-receive-reject-form v-if="isReceiveAndRejectDialog" ref="partReceiveRejectFom" :formdata="formdata" :receive-or-reject="receiveOrReject"></part-receive-reject-form>
      <div slot="footer" class="dialog-footer">

        <el-button type="ghost" @click="isReceiveAndRejectDialog = false" >{{ $t('common.base.cancel') }}</el-button>
        <el-button type="primary" @click="receiveAndReject" >{{ $t('common.base.makeSure') }}</el-button>

        <!--<el-button @click="isReceiveAndRejectDialog = false">取 消</el-button>-->
        <!--<el-button type="primary" @click="receiveAndReject">确 定</el-button>-->
      </div>
    </el-dialog>

    <base-export1 ref="exportPanel" 
                 v-if="allowImportAndExport"
                 :columns="columns"
                 :action="exportAction"
                 :method="'post'"></base-export1>

    <part-back-form ref="partBackForm" @success="loadData" :back-user='backUser' :repertory="repertory" ></part-back-form>

    <base-panel :show.sync="multipleSelectionPanelShow" width="420px">
      <h3 slot="title" style="display: flex;justify-content: space-between;align-items: center">
        <span>{{$t('common.base.exportModal.selectedData', {count:selected.length})}}</span>
        <span v-if="selected.length" class="part-panel-btn" @click="toggleSelection()" :title="$t('common.base.tip.clearChoseDataTip')" data-placement="right" v-tooltip></span>
      </h3>

      <div class="part-selected-panel">
        <div class="part-selected-tip" v-if="!selected.length">
          <img :src="noDataImage">
          <p>{{ $t('common.base.tip.noSelectedDataFromList') }}</p>
        </div>
        <template v-else>

          <div class="part-selected-list" v-if="listType === 'part' || listType === 'stockRecord' || listType === 'useRecord'">
            <div class="part-selected-row part-selected-head">
              <span class="part-selected-sn">{{ $t('common.label.serialNumber') }}</span>
              <span class="part-selected-name">{{ $t('common.base.name') }}</span>
            </div>
            <div class="part-selected-row" v-for="c in selected" :key="c.id">
              <span class="part-selected-sn">{{c.sparepart.serialNumber}}</span>
              <span class="part-selected-name">{{c.sparepart.name}}</span>
              <button type="button" class="part-selected-delete" @click="cancelSelectPart(c)">
                <i class="iconfont icon-fe-close"></i>
              </button>
            </div>
          </div>

          <div class="part-selected-list" v-if="listType === 'personProcess'">
            <div class="part-selected-row part-selected-head">
              <span class="part-selected-sn">{{ $t('common.label.launchTime') }}</span>
              <span class="part-selected-name">{{ $t('common.label.sponsor') }}</span>
            </div>
            <div class="part-selected-row" v-for="c in selected" :key="c.id">
              <span class="part-selected-sn">{{c.propserTime}}</span>
              <span class="part-selected-name">{{c.targetName}}</span>
              <button type="button" class="part-selected-delete" @click="cancelSelectPart(c)">
                <i class="iconfont icon-fe-close"></i>
              </button>
            </div>
          </div>

        </template>
      </div>
    </base-panel>
  </div>
</template>

<script>
// pageDes 个人备件库
import { isOpenData, openAccurateTab } from '@src/util/platform';
import _ from 'lodash';
import Page from '@src/model/Page';
import { formatDate, objectDateToTimestamp, dayTimeEnd, nearDateBy } from 'pub-bbx-utils';
import AuthUtil from '@src/util/auth';
import { safeNewDate } from '@src/util/time';
import StorageUtil from '@src/util/storageUtil';
import { checkButtonDisplayed } from '@src/util/dom';
import PartBackForm from './form/PartBackForm.vue';  
import PartReceiveRejectFom from './form/PartReceiveRejectFom.vue';

import { isShowPartBack } from '@shb-lib/version'
import { storageSet, storageGet } from '@src/util/storageV2';
/* mixin */
import ThemeMixin from '@src/mixins/themeMixin/index.ts'
import BaseSearchDrawer from 'packages/BaseSearchDrawer/BaseSearchDrawer.vue';
import { PageRoutesTypeEnum } from 'pub-bbx-global/pageType/dist/enum/PageRoutesEnum'
import { VersionControlSparePartMixin } from '@src/mixins/versionControlMixin'
/* export & import */
import { partRepertoryPersonView_1, partRepertoryPersonView_2, partRepertoryPersonView_3 } from '@src/api/Export';

import { getExpensePartField } from '@src/api/TaskApi.ts'
import { defaultTableData } from '@src/util/table'

const STORAGE_PART_COLNUM_KEY = 'repe_person_part_list_column';
const STORAGE_STOCK_COLNUM_KEY = 'repe_person_stock_list_column';
const STORAGE_USE_COLNUM_KEY = 'repe_person_use_list_column';
const STORAGE_PROCESS_COLNUM_KEY = 'repe_person_process_list_column';

const STORAGE_PART_PAGESIZE_KEY = 'repe_person_list_part_pagesize';
const STORAGE_STOCK_PAGESIZE_KEY = 'repe_person_list_stock_pagesize';
const STORAGE_USE_PAGESIZE_KEY = 'repe_person_list_use_pagesize';
const STORAGE_PROCESS_PAGESIZE_KEY = 'repe_person_list_process_pagesize';

import { getOssUrl } from '@src/util/assets'
const noDataImage = getOssUrl('/no_data.png')
import {t} from '@src/locales'

export default {
  name: 'sparepart-repertory-person-view',
  inject: ['initData'],
  mixins: [ThemeMixin, VersionControlSparePartMixin],
  data(){
    let pageSize = StorageUtil.get(STORAGE_PART_PAGESIZE_KEY) || 10;

    let originModel = {
      pageNum: 1,
      pageSize,
      type: '',
      typeList: [],
      keyWord: '',
      sortBy: {},
      teamId: null,
      standard: '',
      description: '',
      productTypeList: [],
      item: [],
      sourceIdList: [], // 原仓库
      recordNo: '', // 出入库编号
      remark: '', // 备注
    };
    let processModel = {
      enable: '',
      sparepartType: '',
      sparepartId: '',
      propser: '',
      approver: '',
      timeEnd: '',
      timeStart: '',
      updateTimeEnd: '',
      updateTimeStart: '',
      typeSpec: ''
    }
    return {
      defaultTableData,
      noDataImage,
      isButtonDisplayed: checkButtonDisplayed(),
      isOpenData,
      selectColumnState: 'partV2_repertoryPersonList',
      partField: [],
      multipleSelectionPanelShow: false,
      selectedLimit: 500,
      tag: [],
      auths: {},
      tab: '', // 页签展示
      userId: '', // 当前用户的Id
      tagIds: [], // 当前用户的团队
      tagIdsWithChildTag: [], // 包含子团队
      isExpand: false,
      columns: this.buildColumns(),
      types: [],
      productType: [], // 产品类型
      sourceNameList: [], // 仓库
      openSuperCodePro: true,
      stockItem: [], // 库存记录类型
      useItem: [], // 使用记录类型
      sparepartStatistics:{
        sparepartNumTotal: 0,
        sparepartCountTotal: 0,
      },

      listType: 'part',
      user: {
        userId: null,
        loading: false,
        options: []
      },
      dateRange: [],

      originModel,
      processModel,
      model: _.assign({}, originModel),
      sourceType: [],
      useType: [],
      page: new Page(),
      selected: [],

      partData: {
        id: '',
        loading: false,
        options: []
      },
      userApply: {
        userId: '',
        loading: false,
        options: []
      },
      userApprove: {
        userId: '',
        loading: false,
        options: []
      },
      sparepart: {
        sparepartType: '',
        sparepartId: '',
        loading: false,
        options: []
      },
      
      repertory:[],
      // teams: [],
      formdata: {},
      receiveOrReject: '0',
      isReceiveAndRejectDialog: false,
      state: '', // 状态
      pickerOptions2: {
        shortcuts: [{
          text: t('common.base.aboutTime.nearlyWeek'),
          onClick(picker) {
            const end = safeNewDate();
            const start = safeNewDate();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: t('common.base.aboutTime.nearlyMonth'),
          onClick(picker) {
            const end = safeNewDate();
            const start = safeNewDate();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: t('common.base.aboutTime.lastThreeMonths'),
          onClick(picker) {
            const end = safeNewDate();
            const start = safeNewDate();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      timeValue: [], 
      updateTimeValue: [],
      modelOther: _.assign({}, processModel),
      isTooltipShow: false,
      applyBackingTask: {},

      backUser:{},
      fuzzyPlaceHolder: t('common.form.preview.subSparePart.pla2'),
      pageLoading:true,
      tableContainerHeight:'440px',
    }
  },
  computed: {
    // 是否允许导入导出
    allowImportAndExport(){
      return AuthUtil.hasAuth(this.auths, 'VIP_SPAREPART_PERSION_EXPORT')
    },
    showColumns(){
      return this.columns.filter(col => col.show);
    },
    /**
     * 个人备件库权限下的数据权限
     * 全部权限 - 值为3，能够查询所有人的数据
     * 团队权限 - 值为2，能够查看所属团队人员的数据 
     * 个人权限 - 值为1，能够查看自己的数据
     */
    personDataLevel(){
      return this.auths.VIP_SPAREPART_PERSION || 0;
    },
    exportAction(){
      let action = partRepertoryPersonView_1;
      if(this.listType == 'useRecord') action = partRepertoryPersonView_2;
      if(this.listType == 'part') action = partRepertoryPersonView_3;
      return action;
    },
    /* 是否显示备件退回 */
    isShowPartBack() {
      return this._isShowPartBack
    },
    // filteredTeams() {
    //   if (this.personDataLevel <= 1) return [];
    //   if (this.personDataLevel === 2) {
    //     return this.teams.filter(team => this.tagIds.some(tagId => tagId === team.id)) || [];
    //   }
    //   return this.teams || [];
    // },
    // 类型
    typeItem() {
      if(this.listType == 'useRecord') return this.useItem;
      if(this.listType == 'stockRecord') return this.stockItem;
    }
  },
  methods: {
    // 查看产品类型详情
    openProductMenuTab(id) {
      let fromId;
      try {
        fromId = window.frameElement.getAttribute('id');
      } catch (error) {

      }
      // this.$platform.openTab({
      //   id: `productV2_catalog_view_${id}`,
      //   title: '产品类型详情',
      //   close: true,
      //   url: `/productV2/catalog/view?id=${id}`,
      //   fromId
      // });
      openAccurateTab({
        type: PageRoutesTypeEnum.PageProductV2CatalogView,
        key: id,
        params: `id=${id}`,
        fromId
      })
    },
    // 关闭高级搜索弹框
    closeDrawer(){
      this.isExpand = false;
    },
    // 获取安装产品和安装位置
    getPartField(select, columns) {
      if (select == 'useRecord') {
        getExpensePartField().then(res => {
          if (res.code == 0) {
            if (res.result.length) {
              this.partField = res.result || []
              this.partField.forEach((part, index) => {
                let _field = ''
                if (part.fieldName == 'installProductId') {
                  _field = 'attribute.installProductId'
                } else if(part.fieldName == 'installPosition') {
                  _field = 'attribute.installPosition'
                }
                columns.splice(index + 8, 0, {
                  label: part.displayName,
                  field: _field,
                  show: true,
                  width: 150
                })
              })
              this.$set(this, 'columns', columns);
            }
          }
        })
      }
    },
    toReApply(){
      let fromId = window.frameElement.getAttribute('id');
      // this.$platform.openTab({
      //   url:'/partV2/repertory/apply?fromId=1',
      //   title: '办理出入库',
      //   close: true,
      //   fromId
      // })
      openAccurateTab({
        type: PageRoutesTypeEnum.PageSparepartApply,
        params: 'fromId=1',
        fromId
      })
    },
    repertoryCount(num1, num2) {
      return this.$math.format(this.$math.add(this.$math.bignumber(num1), this.$math.bignumber(num2)))
    },

    async getApplyBackingTask (row) {
      let params = {
        sparepartUserId: row.id
      }
      let result = await this.$http.get('/partV2/repertory/getTaskBySparepartId', params);
      if(result.status == 0){
        this.applyBackingTask = result.data;
        this.isTooltipShow = true;
      }else{
        this.$platform.alert(result.message);
      }
    },

    openTaskDetail(item){
      let fromId = window.frameElement.getAttribute('id');
      // this.$platform.openTab({
      //   id: `taskView_${item.id}`,
      //   url:`/task/view/${item.id}`,
      //   title: `工单${item.taskNo}`,
      //   close: true,
      //   fromId
      // })
      openAccurateTab({
        type: PageRoutesTypeEnum.PageTaskView,
        key: item.id,
        titleKey: item.taskNo,
        fromId
      })
    },
    async openTaskDetail2(item){
      let fromId = window.frameElement.getAttribute('id');
      // this.$platform.openTab({
      //   id: `task_view_${item.taskId}`,
      //   title: `工单${item.taskNo}`,
      //   close: true,
      //   url: `/task/view/${item.taskId}?noHistory=1`,
      //   fromId,
      // });
      openAccurateTab({
        type: PageRoutesTypeEnum.PageTaskView,
        key: item.taskId,
        titleKey: item.taskNo,
        params: 'noHistory=1',
        fromId
      })
    },
    openCustomerDetail(customerId){
      let fromId = window.frameElement.getAttribute('id');

      // this.$platform.openTab({
      //   id: `customer_view_${customerId}`,
      //   title: '客户详情',
      //   close: true,
      //   url: `/customer/view/${customerId}?noHistory=1`,
      //   fromId
      // });
      openAccurateTab({
        type: PageRoutesTypeEnum.PageCustomerView,
        key: customerId,
        params: 'noHistory=1',
        fromId
      })
    },

    //
    cancelSelectPart(part) {
      if (!part || !part.id) return;
      this.selected = this.selected.filter(ms => ms.id !== part.id);
      this.toggleSelection([part]);
    },
    toggleSelection(rows) {
      let isNotOnCurrentPage = false;
      let row = undefined;

      if (rows) {
        for(let i = 0; i < rows.length; i++) {
          row = rows[i];
          isNotOnCurrentPage = this.page.list.every(item => {
            return item.id !== row.id;
          })
          if(isNotOnCurrentPage) return
        }
        rows.forEach(row => {
          this.$refs.table.toggleRowSelection(row);
        });
      } else {
        this.$refs.table.clearSelection();
        this.selected = [];
      }
    },
    // select part
    handleSelection(selection) {
      let tv = this.computeSelection(selection);
      // 在需要限制最多选择500个备件时，取消function内部全部注释即可
      let original = this.selected
        .filter(ms => this.page.list.some(cs => cs.id === ms.id));
      let unSelected = this.page.list
        .filter(c => original.every(oc => oc.id !== c.id));

      if (tv.length > this.selectedLimit) {
        this.$nextTick(() => {
          original.length > 0
            ? unSelected.forEach(row => {
              this.$refs.table.toggleRowSelection(row, false);
            })
            : this.$refs.table.clearSelection();
        })
        return this.$platform.alert(t('common.base.tip.maxDataCanChooseTips', {data1:this.selectedLimit}));
      }
      this.selected = tv;

      this.$refs.baseSelectionBar?.openTooltip();
      this.$nextTick(()=>{
        this.knowTableContainerHeight()
      })
    },
    computeSelection(selection) {
      let tv = [];
      tv = this.selected
        .filter(ms => this.page.list.every(c => c.id !== ms.id));
      tv = _.uniqWith([...tv, ...selection], _.isEqual);
      return tv;
    },
    matchSelected() {
      if (!this.selected.length) return;
      const selected = this.page.list
        .filter(c => {
          if (this.selected.some(sc => sc.id === c.id)) {
            this.selected = this.selected.filter(sc => sc.id !== c.id);
            this.selected.push(c);
            return c;
          }
        }) || [];

      this.$nextTick(() => {
        this.toggleSelection(selected);
      });
    },
    seeTime() {
      const [timeStart, timeEnd] = this.timeValue || [];
      this.model.timeStart = timeStart;
      this.model.timeEnd = timeEnd

      objectDateToTimestamp(this.model, ['timeStart', 'timeEnd'])
    },
    seeUpdateTime() {
      const [updateTimeStart, updateTimeEnd] = this.updateTimeValue || [];
      this.model.updateTimeStart = updateTimeStart;
      this.model.updateTimeEnd = updateTimeEnd

      objectDateToTimestamp(this.model, ['updateTimeStart', 'updateTimeEnd'])
    },
    chooseTeam(value) {
      let tag = (Array.isArray(value) ? value[0] : value) || {};
      this.tag = value;
      this.model.teamId = tag.id;

      this.user.userId = null;
      this.fetchUser();
    },
    exportData(exportAll = false){
      if(!this.allowImportAndExport) return;

      let ids = [];
      let title = '库存记录';
      if(this.listType == 'useRecord') title = '使用记录';
      if(this.listType == 'part') title = '持有备件';
      let fileName = `${formatDate(safeNewDate(), 'YYYY-MM-DD')}个人备件库${title}.xlsx`;

      if(!exportAll){
        if(this.selected.length == 0) return this.$platform.alert(t('common.base.tip.exportUnChooseTip'));
        ids = this.selected.map(item => item.id);
      }

      let params = {};  
      if(exportAll && this.personDataLevel == 1) params.userId = this.userId;

      this.$refs.exportPanel.open(ids, fileName, params);
    },
    chooseSparepart(value){
      if(this.listType != 'personProcess') {
        this.partData.id = value;
      } else {
        this.modelOther.sparepartId = value;
      }
    },
    chooseColnum(column, type){
      this.trackEventHandler('selectColumn');

      column.show = !column.show;

      let key = STORAGE_PART_COLNUM_KEY;
      if(type == 'stockRecord') key = STORAGE_STOCK_COLNUM_KEY;
      if(type == 'useRecord') key = STORAGE_USE_COLNUM_KEY;
      if(type == 'personProcess') key = STORAGE_PROCESS_COLNUM_KEY;
      this.saveColumnStatusToStorage()
      // let data = {};
      // this.columns.forEach(item => data[item.field] = item.show)
      // StorageUtil.save(key, data);
    },
    async partBack(stock){
      this.$track.clickStat(this.$track.formatParams('RETURN_STOCK'));

      this.trackEventHandler('listBack');
      this.backUser = stock;
      console.log(stock);

      this.$refs.partBackForm.open(stock)
    },
    chooseType(value){
      // 设置模糊搜索的placeholder
      if(value == 'part' || value == 'stockRecord') {
        this.fuzzyPlaceHolder = t('common.form.preview.subSparePart.pla2')
      }else if(value == 'useRecord') {
        this.fuzzyPlaceHolder = t('part.text60')
      }
      // 类型清空
      if( value == 'stockRecord' || value == 'useRecord') {
        this.model.item = [];
      }
      if(value == 'personProcess'){
        return this.toReApply()
      }
      this.trackEventHandler('chooseType')

      if(this.listType == value) return;

      this.$set(this, 'listType', value);
      let columns = this.buildColumns();

      if(value == 'stockRecord') columns = this.buildStockColumns();
      if(value == 'useRecord') columns = this.buildUseColumns();
      if(value == 'personProcess') columns = this.buildProcessColums();
      
      
      this.model.pageNum = 1;

      this.page.list = [];
      this.selected = [];

      let key = STORAGE_PART_PAGESIZE_KEY;
      if(this.listType == 'stockRecord') key = STORAGE_STOCK_PAGESIZE_KEY;
      if(this.listType == 'useRecord') key = STORAGE_USE_PAGESIZE_KEY;
      if(this.listType == 'personProcess') key = STORAGE_PROCESS_PAGESIZE_KEY;

      let pageSize = StorageUtil.get(key) || 10;
      this.model.pageSize = pageSize;
      this.originModel.pageSize = pageSize;

      // 获取安装产品和安装位置 博立定制 后续可能通用
      this.getPartField(value, columns)
      let columns_ = this.buildTableColumn();
      this.$set(this, 'columns', columns_);

      this.loadData();
    },
    chooseDate(range){
      this.dateRange = range;
      this.loadData();
    },
    chooseUser(value){
      this.trackEventHandler('choosePerson');

      if(this.user.userId == value) return;

      this.user.userId = value;
      this.model.pageNum = 1;
      this.loadData();
    },
    // 改变状态
    chooseState(value) {
      this.state = value;
      this.loadData();
    },
    chooseUserApply(value){
      if(this.modelOther.propser == value) return;
      // this.userApply.userId = value;
      this.modelOther.propser = value;
    },
    chooseUserApprove(value){
      if(this.modelOther.approver == value) return;
      this.modelOther.approver = value;
    },
    hooseSparepartType(value) {
      this.modelOther.sparepartType = value;
    },
    fetchUser(keyword){
      if(this.personDataLevel == 1) return;

      let model = {
        keyword,
        pageSize: 50
      }

      if(this.personDataLevel == 2) {
        // model.tagIds = this.tagIds;
        model.tagIds = this.tagIdsWithChildTag
      }

      // 如果选择了服务团队，限定搜索人员只能返回该团队的人
      if (this.model.teamId) {
        model.tagIds = [this.model.teamId];
      }

      this.user.loading = true
      this.$http.get('/partV2/repertory/users', model)
        .then(result => this.user.options = result)
        .catch(err => console.warn(err))
        .finally(() => this.user.loading = false);
    },
    select(data){
      this.selected = data;
    },
    jump(pageNum){
      this.model.pageNum = pageNum;
      this.loadData();
    },
    pageSizeChange(pageSize){
      this.model.pageSize = pageSize;
      this.originModel.pageSize = pageSize;

      this.loadData();

      let key = STORAGE_PART_PAGESIZE_KEY;
      if(this.listType == 'stockRecord') key = STORAGE_STOCK_PAGESIZE_KEY;
      if(this.listType == 'useRecord') key = STORAGE_USE_PAGESIZE_KEY;
      if(this.listType == 'useRecord') key = STORAGE_USE_PAGESIZE_KEY;
      if(this.listType == 'personProcess') key = STORAGE_PROCESS_PAGESIZE_KEY;

      StorageUtil.save(key, pageSize);
    },
    search(){
      this.trackEventHandler('search');
      this.isExpand = false;
      this.model.pageNum = 1;
      this.loadData();
    },
    reset(){
      this.isExpand = false;
      this.trackEventHandler('reset');
      this.model = _.assign({}, this.originModel);
      this.partData.id = '';
      this.$refs.table.clearSort();

      this.timeValue = [];
      this.updateTimeValue = [];
      this.state = '';
      this.modelOther = _.assign({}, this.processModel);
      
      this.loadData();
    },
    sort({column, prop, order}){
      let sortBy = {};
      
      if(prop && this.listType == 'part'){
        let tableName = 'userSparepart';
        let key = `${tableName}.${prop}`
        sortBy[key] = order == 'ascending';
      }

      this.model.sortBy = sortBy;
      this.loadData();
    },
    async loadData(){
      this.pageLoading = true;
      try{
        let listType = this.listType;
        let fn = this.fetchData;
        if(listType == 'stockRecord') fn = this.fetchStockRecord;
        if(listType == 'useRecord') fn = this.fetchUseRecord;
        if(listType == 'personProcess') fn = this.fetchProcessRecord;
        if(this.listType != 'part') this.model.sortBy = {};

        if(listType != 'personProcess') {
          this.page = await fn();
        } else {
          let result = await fn();
          this.$set(this, 'page', result.data);
          this.page.list.forEach(item => {
            this.$set(item, '_variation', item.variation - item.solvedVariation)
          })
        }
        this.model.pageNum = this.page.pageNum;
        this.model.pageSize = this.page.pageSize;

        this.matchSelected();
      }catch(error){
        console.warn(error)
      }
      this.$nextTick(() => this.pageLoading = false);
    },
    fetchUserApply(keyword){
      // 获取用户
      let model = {
        keyword,
        pageSize: 50
      }
      this.userApply.loading = true
      this.$http.get('/partV2/repertory/user/list', model)
        .then(result => this.userApply.options = result.list)
        .catch(err => console.log(err))
        .finally(() => this.userApply.loading = false);
    },
    fetchUserApprove(keyword){
      // 获取用户
      let model = {
        keyword,
        pageSize: 50
      }
      this.userApply.loading = true
      this.$http.get('/partV2/repertory/user/list', model)
        .then(result => this.userApprove.options = result.list)
        .catch(err => console.log(err))
        .finally(() => this.userApprove.loading = false);
    },
    fetchData(){
      let userId = this.userId;

      // 如果是管理员可查看他人数据
      if(this.personDataLevel > 1){
        userId = this.user.userId;
      }

      let params = {
        userId,
        ...this.model,
        sparepartId: this.partData.id,
        ...(this.listType == 'part' && { enable: 1}),
      }

      return this.$http.post('/partV2/repertory/person/list', params).then(result => {
        let list = result.list || [];
        list.forEach(item => item.disabled = false);

        this.sparepartStatistics.sparepartNumTotal = result.sparepartNumTotal || 0;
        this.sparepartStatistics.sparepartCountTotal = result.sparepartCountTotal || 0;
        return result;
      })
    },
    fetchStockRecord(){
      let userId = this.userId;
      // 如果是管理员可查看他人数据
      if(this.personDataLevel > 1){
        userId = this.user.userId;
      }

      let params = {
        ...this.model,
        userId,
        sparepartId: this.partData.id
      };

      if(Array.isArray(this.dateRange)){
        let [start, end] = this.dateRange;
      
        if(start && end){
          params.timeStart = start;
          params.timeEnd = end;
        }
        objectDateToTimestamp(params, ['timeStart', 'timeEnd'])
      }
      
      // 删除type字段，备件type和记录type冲突
      delete params.type;

      return this.$http.get('/partV2/repertory/person/stockRecord', params)
    },
    fetchUseRecord(){
      let userId = this.userId;
      // 如果是管理员可查看他人数据
      if(this.personDataLevel > 1){
        userId = this.user.userId;
      }

      let params = {
        ...this.model,
        userId,
        sparepartId: this.partData.id
      };

      if(Array.isArray(this.dateRange)){
        let [start, end] = this.dateRange;
      
        if(start && end){
          params.timeStart = start;
          params.timeEnd = end;
        }
        objectDateToTimestamp(params, ['timeStart', 'timeEnd'])
      }

      // 删除type字段，备件type和记录type冲突
      delete params.type;

      return this.$http.post('/partV2/repertory/person/useRecord', params)
    },
    // 个人处理 
    fetchProcessRecord() {
      let targetId = '';
      // 如果是管理员可查看他人数据
      if(this.personDataLevel > 1){
        targetId = this.user.userId;
      }      
      let params = {
        ...this.model,
        ...this.modelOther,
        state: this.state,
        targetId
      };
      if(Array.isArray(this.dateRange)){
        let [start, end] = this.dateRange;
      
        if(start && end){
          params.timeStart = start;
          params.timeEnd = end;
        }
        objectDateToTimestamp(params, ['timeStart', 'timeEnd'])
      }
      
      // 删除type字段，备件type和记录type冲突
      delete params.type;

      return this.$http.post('/partV2/approve/list/allApprove/person', params)
    },
    buildColumns(){
      let localData = StorageUtil.get(STORAGE_PART_COLNUM_KEY) || {};

      let columns = [
        {
          label: t('common.label.serialNumber'),
          field: 'sparepart.serialNumber',
          show: true,
          export: true,
        },
        {
          label: t('common.base.name'),
          field: 'sparepart.name',
          show: true,
          export: true,
        },
        {
          label: t('common.label.sparepartType'),
          field: 'sparepart.type',
          show: true,
          width: 150,
          export: true,
        },
        {
          label: t('common.label.sparepartStandard'),
          field: 'sparepart.standard',
          show: true,
          width: 150,
          export: true,
        },
        {
          label: t('common.fields.unit.displayName'),
          field: 'sparepart.unit',
          show: false,
          width: 100,
          exportNoChecked: true,
          export: true,
        },
        {
          label: t('common.part.explain'),
          field: 'sparepart.description',
          show: true,
          width: 150,
          export: true,
        },
        {
          label: t('common.base.quantity'),
          field: 'repertoryCount',
          show: true,
          sortable: 'custom',
          width: 120,
          export: true,
        },
        {
          label: t('common.label.disabledCount'),
          field: 'unavailableNum',
          show: true,
          width: 120,
          export: true,
        },
        {
          field: 'userName',
          label: t('common.pageTitle.pageLibraryList'),
          show: true,
          width: 120,
          export: true,
        },
        {
          label: t('common.label.operate'),
          field: 'operate',
          width: 80,
          show: true,
          export: false,
          fixed: 'right'
        }
      ];
      
      if(this.openSuperCodePro) {
        // 如果没有开启超级二维码，需要删除关联产品类型
        let proIndex = columns.indexOf(columns.filter(item=>item.field === 'unavailableNum')[0])
        let pro = {
          label: t('common.form.type.related_catalog'),
          field: 'productTypeList',
          show: false,
          width: 150,
          exportNoChecked: true,
          export: true,
        }
        if(proIndex != -1) columns.splice(proIndex, 0, pro)
      }
      columns.forEach(column => {
        let isShow = localData[column.field];
        if(typeof isShow == 'boolean') column.show = isShow;
      })

      return columns;
    },
    buildStockColumns(){
      let localData = StorageUtil.get(STORAGE_STOCK_COLNUM_KEY) || {}
      let columns = [
        {
          field: 'sparepart.serialNumber',
          label: t('common.part.partNo'),
          show: true,
          minWidth: 120
        },
        {
          field: 'sparepart.name',
          label: t('common.fields.partName.displayName'),
          show: true,
          minWidth: 120
        },
        {
          label: t('common.label.sparepartType'),
          field: 'sparepart.type',
          show: true,
          width: 150
        },
        {
          label: t('common.label.sparepartStandard'),
          field: 'sparepart.standard',
          show: true,
          width: 150
        },
        {
          label: t('common.label.unit'),
          field: 'sparepart.unit',
          show: false,
          width: 100,
          exportNoChecked: true
        },
        {
          label: t('common.base.explain'),
          field: 'sparepart.description',
          show: true,
          width: 150
        },
        {
          field: 'item',
          label: t('common.label.type'),
          show: true,
          width: 100
        },
        {
          field: 'variation',
          label: t('part.field33'),
          show: true,
          width: 80
        },
        {
          field: 'number',
          label: t('part.field34'),
          show: true,
          width: 80
        },
        {
          field: 'sourceName',
          label: t('part.field26'),
          show: true,
          width: 120
        },
        {
          field: 'userName',
          label: t('common.pageTitle.pageLibraryList'),
          show: true,
          width: 120
        },
        {
          field: 'propserName',
          label: t('common.label.sponsor'),
          show: true,
          width: 120
        },
        {
          field: 'executorName',
          label: t('common.form.preview.stock.sparepartStockDisplayName.approveName'),
          show: true,
          width: 120
        },
        {
          field: 'remark',
          label: t('common.base.remark'),
          show: true,
          minWidth: 150,
          showTip: false
        },
        {
          field: 'recordNo',
          label: t('part.field30'),
          show: true,
          minWidth: 200
        },
        {
          field: 'createTime',
          label: t('common.label.time'),
          show: true,
          width: 180
        }
      ];

      columns.forEach(column => {
        let isShow = localData[column.field];
        if(typeof isShow == 'boolean') column.show = isShow;
      })

      return columns;
    },
    buildUseColumns(){
      let localData = StorageUtil.get(STORAGE_USE_COLNUM_KEY) || {}
      let columns = [
        {
          field: 'sparepart.serialNumber',
          label: t('common.part.partNo'),
          show: true,
          minWidth: 120
        },
        {
          field: 'sparepart.name',
          label: t('common.fields.partName.displayName'),
          show: true,
          minWidth: 120
        },
        {
          label: t('common.label.sparepartType'),
          field: 'sparepart.type',
          show: true,
          width: 150
        },
        {
          label: t('common.label.sparepartStandard'),
          field: 'sparepart.standard',
          show: true,
          width: 150
        },
        {
          label: t('common.label.unit'),
          field: 'sparepart.unit',
          show: false,
          width: 100,
          exportNoChecked: true
        },
        {
          label: t('common.part.explain'),
          field: 'sparepart.description',
          show: true,
          width: 150
        },
        {
          field: 'item',
          label: t('common.label.type'),
          show: true,
          width: 100
        },
        {
          field: 'variation',
          label: t('part.field33'),
          show: true,
          width: 80
        },
        {
          field: 'number',
          label: t('part.field34'),
          show: true,
          width: 80
        },
        {
          field: 'taskNo',
          label: t('part.field35'),
          show: true,
          width: 150
        },
        {
          field: 'customerName',
          label: t('common.label.customerName'),
          show: true,
          width: 150
        },
        {
          field: 'customerNumber',
          label: t('common.form.type.customerNo'),
          show: true,
          width: 150
        },
        {
          field: 'userName',
          label: t('common.pageTitle.pageLibraryList'),
          show: true,
          width: 120
        },
        {
          field: 'createTime',
          label: t('common.label.time'),
          show: true,
          width: 180
        }
      ];

      if(this.openSuperCodePro) {
        // 如果没有开启超级二维码，需要删除关联产品类型
        let proIndex = columns.indexOf(columns.filter(item=>item.field === 'item')[0])
        let pro = {
          label: t('common.form.type.related_catalog'),
          field: 'productTypeList',
          show: false,
          width: 150,
          exportNoChecked: true
        }
        if(proIndex != -1) columns.splice(proIndex, 0, pro)
      }
      
      columns.forEach(column => {
        let isShow = localData[column.field];
        if(typeof isShow == 'boolean') column.show = isShow;
      })

      return columns;
    },
    buildProcessColums() {
      let localData = StorageUtil.get(STORAGE_PROCESS_COLNUM_KEY) || {}
      let columns = [
        {
          field: 'propserName',
          label: t('common.label.sponsor'),
          show: true,
          minWidth: 120
        },
        {
          field: 'propserTime',
          label: t('common.label.launchTime'),
          show: true,
          minWidth: 180,
          overflow: false
        },
        {
          field: 'sparepartRepertory.sparepart.serialNumber',
          label: t('common.part.partNo'),
          show: true,
          minWidth: 120
        },
        {
          field: 'sparepartRepertory.sparepart.name',
          label: t('common.fields.partName.displayName'),
          show: true,
          minWidth: 120
        },
        {
          label: t('common.label.sparepartType'),
          field: 'sparepartRepertory.sparepart.type',
          show: true,
          minWidth: 120
        },
        {
          label: t('common.label.sparepartStandard'),
          field: 'sparepartRepertory.sparepart.standard',
          show: true,
          minWidth: 120
        },
        {
          field: 'type',
          label: t('common.label.type'),
          show: true,
          minWidth: 100
        },
        {
          field: 'sparepartRepertory.repertory.name',
          label: t('common.base.warehouse'),
          show: true,
          minWidth: 100
        },
        {
          field: 'targetName',
          label: t('common.pageTitle.pageLibraryList'),
          show: true,
          minWidth: 100
        },
        {
          field: '_variation',
          label: t('part.field36'),
          show: true,
          minWidth: 80
        },
        {
          field: 'solvedVariation',
          label: t('part.field37'),
          show: true,
          minWidth: 80
        },
        {
          label: t('common.form.preview.stock.sparepartStockDisplayName.approveName'),
          field: 'executorName',
          show: true,
          minWidth: 120
        },
        {
          label: t('common.form.preview.stock.sparepartStockDisplayName.approveTime'),
          field: 'updateTime',
          show: true,
          minWidth: 180
        },
        {
          field: 'operate',
          label: t('common.label.operate'),
          show: true,
          width: 180,
          minWidth: 160,
          fixed: 'right'
        }
      ];

      columns.forEach(column => {
        let isShow = localData[column.field];
        if(typeof isShow == 'boolean') column.show = isShow;
      })

      return columns;
    },
    /**
     * @param {object} data 数据
     * @param {string} 0 接收 1 拒收
     */
    receiveAndRejectDialog(val, str) {
      this.formdata = val;
      this.receiveOrReject = str;
      this.isReceiveAndRejectDialog = true;
    },
    async receiveAndReject(data) {
      let form = this.$refs.partReceiveRejectFom;
      if(null == form) return;

      let partReceiveRejectFom = await form.pack();
      if(!partReceiveRejectFom) return;
      this.pageLoading = true;
      let params = {
        id: partReceiveRejectFom.applayId,
        solvedVariation: Number(partReceiveRejectFom.sparesNum),
        remark: partReceiveRejectFom.remarks
      };
      try {
        let result;
        let str;
        if(partReceiveRejectFom.operate == 'yes') {
          result = await this.$http.post('/partV2/approve/allot/accept', params);
          str = t('part.text61');
        } else {
          result = await this.$http.post('/partV2/approve/allot/reject', params);
          str = t('part.text62')
        }
        if(result.status == 0){

          this.$platform.toast(str);
          this.isReceiveAndRejectDialog = false;
          this.loadData();

        }else{
          this.$platform.alert(result.message);
        }

      } catch (error) {
        console.log(error)
      } finally {
        this.$nextTick(() => this.pageLoading = false);
      }
    },
    initialize(){
      this.loadData();
      this.fetchRepertory();
      this.fetchUser();
      this.fetchSparepart();
      this.fetchUserApply();
      this.fetchUserApprove();      
    },
    fetchSparepart(keyword){
      let model = {
        keyWord: keyword,
        enable: 1,
        pageSize: 50
      };

      this.partData.loading = true;
      this.sparepart.loading = true;
      this.$http.post('/partV2/repertory/sparepart/list', model)
        .then(result => {
          this.partData.options = result.list;
          this.sparepart.options = result.list;
        })
        .catch(err => console.warn(err))
        .finally(() => {
          this.partData.loading = false;
          this.sparepart.loading = false;
        });
    },
    fetchRepertory(){
      // 获取仓库类型
      return this.$http.get('/partV2/repertory/listForTeam').then(result => {
        this.repertory = result || [];
      })
    },
    /**
     * @des 表单拖拽钩子函数
     */
    headerDragend(newWidth, oldWidth, column, event) {
      let data = this.columns
        .map((item) => {
          if (
            item.fieldName === column.property
            || item.field === column.property
          ) {
            item.width = column.width;
          }
          return item;
        })
        .map((item) => {
          return {
            field: item.field,
            show: item.show,
            width: item.width,
          };
        });
      this.modifyColumnStatus({ type: 'column', data });
    },
    /**
     * @description 修改选择列设置
     * @param {Object} event 事件对象
     */
    modifyColumnStatus(event) {
      let columns = event.data || [],
        colMap = columns.reduce(
          (acc, col) => (acc[col.field] = col) && acc,
          {}
        );
      this.columns.forEach((col) => {
        let newCol = colMap[col.field];
        if (null != newCol) {
          this.$set(col, 'show', newCol.show);
          this.$set(col, 'width', newCol.width);
        }
      });

      this.saveColumnStatusToStorage();
    },

    saveColumnStatusToStorage() {
      const localStorageData = this.getLocalStorageData();
      let columnsStatus = null;

      // 判断是否存储选择列
      const columnsList = this.columns.map((c) => ({
        field: c.field,
        show: c.show,
        width: c.width,
      }));

      if (localStorageData.columnStatus) {
        localStorageData.columnStatus[
          `${this.selectColumnState}${this.listType}`
        ] = columnsList;
        columnsStatus = localStorageData.columnStatus;
      } else {
        columnsStatus = {
          [`${this.selectColumnState}${this.listType}`]: columnsList,
        };
      }

      this.saveDataToStorage('columnStatus', columnsStatus);
    },
    getLocalStorageData() {
      const dataStr = storageGet('customerListData') || '{}';
      return JSON.parse(dataStr);
    },
    saveDataToStorage(key, value) {
      const data = this.getLocalStorageData();
      data[key] = value;
      storageSet('customerListData', JSON.stringify(data));
    },
    // 构建表格列
    buildTableColumn() {
      let baseColumns = this.buildColumns();
      if(this.listType == 'stockRecord') baseColumns = this.buildStockColumns();
      if(this.listType == 'useRecord') baseColumns = this.buildUseColumns();
      if(this.listType == 'personProcess') baseColumns = this.buildProcessColums();
      const localStorageData = this.getLocalStorageData();
      let columnStatus = (localStorageData.columnStatus && localStorageData.columnStatus[`${this.selectColumnState}${this.listType}`]) || [];
      let localColumns = columnStatus
        .map(i => (typeof i == 'string' ? { field: i, show: true } : i))
        .reduce((acc, col) => (acc[col.field] = col) && acc, {});
      let columns = [...baseColumns].map(col => {
        let show = col.show;
        let width = col.width;
        let localField = localColumns[col.field];
        if (null != localField) {
          width = typeof localField.width == 'number'
            ? `${localField.width}px`
            : `${localField.width}`.indexOf('px') ? localField.width : '';
          show = localField.show !== false;
        }
        col.show = show;
        col.width = width;
        col.type = 'column';

        return col;
      });

      if (this.isBasicEditionHideProduct) {
        columns = columns.filter(item => item.field !== 'esProductEntities')
      }

      return columns;
    },

    // TalkingData事件埋点
    trackEventHandler(type) {
      switch (type) {
      case 'search':
        this.$tdOnEvent('pc：个人备件库-搜索事件');
        break;
      case 'reset':
        this.$tdOnEvent('pc：个人备件库-重置事件');
        break;
      case 'advSearch':
        this.$tdOnEvent('pc：个人备件库-高级搜索事件');
        break;
      case 'choosePerson':
        this.$tdOnEvent('pc：个人备件库-搜索人员出入框事件');
        break;
      case 'chooseType':
        this.$tdOnEvent('pc：个人备件库-备件状态下拉框事件');
        break;
      case 'selectColumn':
        this.$tdOnEvent('pc：个人备件库-选择列事件');
        break;
      case 'moreAction':
        this.$tdOnEvent('pc：个人备件库-更多操作事件');
        break;
      case 'listBack':
        this.$tdOnEvent('pc：个人备件库-列表退回事件');
        break;                                                                      
      default:
        break;
      }
    },
    /**
     * @des 获取列表当前的可滚动高度
     */
		 knowTableContainerHeight(){
      let min = 440;
      try {
        let window_ = window.innerHeight;
        let header = this.$refs.tableHeaderContainer?.offsetHeight || 0;
        let do_ = this.$refs.tableDoContainer?.offsetHeight || 0;
        let footer = this.$refs.tableFooterContainer?.offsetHeight || 0;
        let selection = this.$refs.BaseSelectionBarComponent?.offsetHeight || 0;
        // selection = selection ? selection + 8 : selection;
        min = window_ - header * 1 - do_ * 1 - footer * 1 - selection * 1 - 20 - 10;
        console.log(window_, header, do_, footer, selection, 'window_, header, do_, footer, selection');
        console.log(min, 'min')
        min = min > 440 ? min : 440;
      } catch (error) {
        console.warn(error, 'error try catch');
      }
      this.$set(this, 'tableContainerHeight', `${min}px`)
    },
    changePackUp(){
      this.packUp = !this.packUp;
      this.$nextTick(()=>{
        this.knowTableContainerHeight()
      })
    }
  },
  created(){
    let initData = this.initData || {};
    this.dateRange = [+nearDateBy(89, 'day'), +dayTimeEnd()]
    this.types = initData.sparepartType || [];
    this.auths = initData.auths || {};
    this.userId = initData.userId || '';
    this.tagIds = initData.tagIds || [];
    this.tagIdsWithChildTag = initData.tagIdsWithChildTag || []
    this.productType = initData.productType || [];
    this.sourceNameList = initData.sourceNameList || [];
    this.openSuperCodePro = initData.openSuperCodePro !== false;
    this.stockItem = initData.stockItem || [];
    this.useItem = initData.useItem || [];
    // this.teams = initData.teams || [];
    this.tab = initData.tab || '0'
    let select = '';
    if(this.tab == '0') select = 'part'
    else if(this.tab == '1') select = 'stockRecord'
    else if(this.tab == '2') select = 'useRecord'
    // else if(this.tab == '3') select = 'personProcess'
    this.listType = select;

    let columns = this.buildColumns();

    if(select == 'stockRecord') columns = this.buildStockColumns();
    if(select == 'useRecord') columns = this.buildUseColumns();
    if(select == 'personProcess') columns = this.buildProcessColums();
    
    // this.$set(this, 'columns', columns);


    let key = STORAGE_PART_PAGESIZE_KEY;
    if(this.listType == 'stockRecord') key = STORAGE_STOCK_PAGESIZE_KEY;
    if(this.listType == 'useRecord') key = STORAGE_USE_PAGESIZE_KEY;
    if(this.listType == 'useRecord') key = STORAGE_USE_PAGESIZE_KEY;
    if(this.listType == 'personProcess') key = STORAGE_PROCESS_PAGESIZE_KEY;



    this.model.pageSize = StorageUtil.get(key) || 10;

    // 获取安装产品和安装位置 博立定制 后续可能通用
    this.getPartField(select, columns)
    let columns_ = this.buildTableColumn();
    this.$set(this, 'columns', columns_);

    this.initialize()
  },
  mounted() {
    let that_ = this;
    // 监听切换后需要重新计算列表高度 后续可以用activated生命周期替换
    window.addEventListener('message', (event)=> {
      const {action, data} = event.data;
      if (action == 'shb.frame.activatedPage'){
        that_.$nextTick(()=> {
          that_.knowTableContainerHeight();
        })
      }
    });
    this.$nextTick(()=> {
      this.knowTableContainerHeight()
      window.onresize = _.debounce(()=>{
        that_.knowTableContainerHeight()
      }, 500)
    })
  },
  components: {
    [BaseSearchDrawer.name]:BaseSearchDrawer,
    [PartBackForm.name]: PartBackForm,
    [PartReceiveRejectFom.name]: PartReceiveRejectFom
  }
}
</script>

<style lang="scss">
.srp-user-item{
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  padding: 4px 0;

  &:last-child{
    margin: 0;
  }

  img{
    display: block;
    width: 28px;
    height: 28px;
    border-radius: 2px;
  }

  p{
    flex: 1;
    margin: 0;
    margin-left: 10px;
    font-weight: 500;
    font-size: 14px;
    overflow: hidden;
    line-height: 28px;
    text-overflow: ellipsis;
  }
}

.srp-list-form{ 
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;

  .srp-list-form-item{
    margin-right: 5px;
  }
}


.customize-el-dropdown-btn {
  padding: 0 15px;
  line-height: 32px;
  display: inline-block;
  background: $color-primary-light-9;
  color: $text-color-primary;
  outline: none;
  margin-left: 5px;
  .iconfont {
    margin-left: 5px;
    font-size: 12px;
  }

  &:hover {
    cursor: pointer;
    color: #fff;
    background: $color-primary;
  }
}

.customize-el-dropdown-btn {
  padding: 0 15px;
  line-height: 32px;
  display: inline-block;
  background: $color-primary-light-9;
  color: $text-color-primary;
  outline: none;
  margin-left: 5px;
  .iconfont {
    margin-left: 5px;
    font-size: 12px;
  }

  &:hover {
    cursor: pointer;
    color: #fff;
    background: $color-primary;
  }
}


.part-option{
  margin: 5px 0;

  p{
    overflow: hidden;
    margin: 0;
    line-height: 24px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.unavailable-content {
  position: relative;

  p{
    margin: 0;
    // line-height: 25px;
    font-size: 13px;
  }

  .unavailable-content-btn {
    display: inline-block;
    padding: 5px 10px;
    font-size: 12px;
    color: #55B7B4;
    cursor: pointer;
  }

  .unavailable-content-box {
    position: absolute;
    top: 20px;
    right: -80px;
    padding: 0 10px 5px;

    line-height: 20px;

    width: 130px;

    background: #fff;
    border-radius: 4px;
    border: 1px solid #ebeef5;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

    .title {
      display: flex;
      justify-content: space-between;
      padding: 5px 0;
      font-size: 12px;

      i{
        font-size: 14px;
        line-height: 1.5;
      }
    }

    .task-link {
      display: block;
      font-size: 13px;
      color: #55B7B4;
    }
  }
}

// -------- part selected panel --------
.part-selected-count {
  @include fontColor();
  padding: 0 3px;
  width: 15px;
  text-align: center;
  cursor: pointer;
  font-size: 13px;
}

.part-selected-panel {
  font-size: 14px;
  height: calc(100% - 51px);

  .part-selected-tip {
    padding-top: 80px;

    img {
      display: block;
      width: 160px;
      margin: 0 auto;
    }

    p {
      text-align: center;
      color: $text-color-regular;
      margin: 8px 0 0 0;
      line-height: 20px;
    }
  }

  .part-selected-list {
    height: 100%;
    padding: 10px;
    overflow-y: auto;

    .part-selected-row {
      display: flex;
      flex-flow: row nowrap;
      line-height: 36px;
      border-bottom: 1px solid #ebeef5;
      font-size: 13px;

      &:hover {
        background-color: #f5f7fa;

        .part-selected-delete {
          visibility: visible;
        }
      }
    }

    .part-selected-head {
      background-color: #F0F5F5;
      color: #333;
      font-size: 14px;
    }

    .part-selected-sn {
      padding-left: 10px;
      width: 150px;
      @include text-ellipsis;
    }

    .part-selected-name {
      padding-left: 10px;
      flex: 1;
      @include text-ellipsis;
    }

    .part-selected-delete {
      width: 36px;
    }

    .part-selected-row button.part-selected-delete {
      padding: 0;
      width: 36px;
      height: 36px;
      border: none;
      background-color: transparent;
      outline: none;
      color: #646B78;
      visibility: hidden;

      i {
        font-size: 14px;
      }

      &:hover {
        color: #e84040;
      }
    }
  }
}

.part-panel-btn {
  float: right;
  cursor: pointer;
  width: 16px;
  height: 16px;
  background: url("../../../assets/img/clear.png") no-repeat center;
  background-size: cover;

  &:hover {
    background: url("../../../assets/img/clear-hover.png") no-repeat center;
    background-size: cover;
  }
}

.srp-list-form-item-date-picker {
  width: 350px !important;
}
</style>

<style lang="scss" scoped>
  .base-search-group-container .base-search {
    justify-content: flex-end;
  }
  .page{
    overflow:visible;
  }
</style>